<template>
  <div class="poscontent">
    <div class="flexrowbetween mb_14">
      <div class="flex flexwrapper headerbox">
        <div class="headeritem flexcenter mr_15 f-14 commhover" :class="{active:active==1}" @click="handleClick(1)">套餐类型管理</div>
        <div class="headeritem flexcenter f-14 commhover" :class="{active:active==2}" @click="handleClick(2)">优惠活动管理</div>
      </div>
      <div class="flex">
        <div class="headeritem w_auto bg_fff flexcenter mr_15 f-14 commhover" @click="handleOpen(1)">返现广告币使用规则</div>
        <div class="headeritem w_auto bg_fff flexcenter f-14 commhover" @click="handleOpen(2)">广告币换算规则</div>
      </div>
    </div>
    <combo-com v-if="active==1" />
    <discounts-com v-if="active==2"  />

    <el-dialog
      title="返现广告币使用规则"
      :visible.sync="open"
      width="620px"
      class="commdia"
      :before-close="handleCloseAdd"
      :close-on-click-modal='false'
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="160px" label-position="left">
        <el-form-item label="返现广告币可用于：" prop="position_id">
          <el-select clearable v-model="form.position_id" multiple placeholder="请选择" style="width:100%">
            <el-option v-for="(item, index) in positionList" :key="index" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseAdd">取 消</el-button>
        <el-button type="primary" :loading='loading' @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="广告币换算规则"
      :visible.sync="open1"
      width="620px"
      class="commdia"
      :before-close="handleClose"
      :close-on-click-modal='false'
      append-to-body
    >
      <el-form ref="matrixform" :model="matrix" :rules="matrixrules" label-width="120px" label-position="left">
        <el-row>
          <el-col :span="14">
            <el-form-item label="广告币换算规则" prop="coin">
              <el-input type="number" maxlength="9" v-model="matrix.coin" readonly placeholder="人民币" style="width:80%" /> <span class="pl-6 c_000">元</span>
            </el-form-item>
          </el-col>
          <el-col :span="2">
           <div class="flexcenter justifycenter c_000  f-16" style="height:36px">=</div>
          </el-col>
          <el-col :span="8">
            <el-form-item label="" prop="score" label-width="0">
              <el-input type="number" v-model="matrix.score" maxlength="9" placeholder="广告币"  style="width:85%" /> <span class="pl-6 c_000">个</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading='loading2' @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {ruleInfo, matrixInfo, editRule, matrix} from '@/api/favorable'
import ComboCom from './ComboCom.vue'
import DiscountsCom from './DiscountsCom.vue'
export default {
  data() {
    return {
      active:1,
      open:false,
      open1:false,
      form:{
        position_id:[]
      },
      rules:{
        position_id:[{ required: true, message: "请选择排放版位", trigger: "change" }]
      },
      loading:false,
      positionList:[],
      matrix:{
        coin:'',
        score:''
      },
      matrixrules:{
        coin:[{ required: true, message: "请输入人民币", trigger: "blur" }],
        score:[{ required: true, message: "请输入广告币", trigger: "blur" }]
      },
      loading2:false
    };
  },
  components:{
    ComboCom,
    DiscountsCom
  },
  created(){
    this.getDicts('/manager/api/getPlanPosition').then(res=>{
      this.positionList = res.data.map(item=>({...item,id:item.id+''}))
    })
  },
  methods: {
    handleClick(num) {
      this.active = num;
    },

    handleOpen(type){
      if(type==1){
        ruleInfo().then(res=>{
          if(res.data.length){
            this.form.position_id = res.data.map(item=>item)
          }
        })
        this.open = true;
      }else{
        matrixInfo().then(res=>{
          this.matrix = res.data
        })
        this.open1 = true
      }
    },

    handleCloseAdd(){
      this.open = false
    },

    submitForm() {
      this.$refs.form.validate(valid=>{
        if(!valid) return
        this.loading = true
        editRule(this.form).then(res=>{
          this.loading = false
          this.$message.success('编辑成功')
          this.handleCloseAdd()
        }).catch(()=>{
          this.loading = false
        })
      })
    },

    handleClose(){
      this.open1 = false
    },

    submit(){
      this.$refs.matrixform.validate(valid=>{
        if(!valid) return
        this.loading2 = true
        matrix(this.matrix).then(()=>{
          this.loading2 = false
          this.$message.success('编辑成功')
          this.handleClose()
        }).catch(()=>{
          this.loading2 = false
        })
      })
    }

  },
};
</script>

<style lang="scss" scoped>
.poscontent {
  // 56 导航栏的高 46 tab的高度 35 padding的高度
  height: calc(100vh - 60px);
  padding: 16px 16px 0 16px;
  //   overflow-y: auto;
  overflow-x: hidden;
}
.headeritem {
  width: 105px;
  height: 30px;
  border: 1px solid #1670F1;
  color: #1670F1;

  &.active{
    background-color: #1670F1;
    color: #fff;
  }
}
.w_auto{
  width: auto;
  padding: 0 15px;
  border-radius: 4px;
}
</style>